<script lang="ts" setup>
import { ref, computed } from "vue";
import dayjs from "dayjs";
import {DateUtils} from "/@/utils/DateUtils.ts";
const emit = defineEmits<{
  (event: "choose", value: any): void;
}>();
const modelValue = ref({
  dateRange: undefined,
  dataType: 1
})

onMounted(()=> {
  let date = new Date();
  modelValue.value.dateRange  = [
     dayjs( DateUtils.offsetDays(date,-1)).format('YYYY-MM-DD'),
     dayjs( date).format('YYYY-MM-DD')]


  emit("choose", modelValue.value);
})
const handleDateChange =()=> {
  emit("choose", modelValue.value);
}
</script>

<template>
  <div class="range-container">
    <el-date-picker
        @change="handleDateChange"
        v-model="modelValue.dateRange" type="daterange" :range-separator="modelValue.dataType == 1 ? '与':'至'"
        start-placeholder="开始日期"
        value-format="YYYY-MM-DD" end-placeholder="结束日期"  />


    <el-radio-group style="margin-left: 12px;" v-model="modelValue.dataType" @change="handleDateChange">
      <el-radio-button label="同比" :value="1" />
      <el-radio-button label="全量比较" :value="2" />
    </el-radio-group>

  </div>
</template>

<style scoped lang="scss">
.range-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
</style>
